<template>
	<!--pages/Activity/Activity.wxml-->
	<view>
		<!-- 头部导航 -->
		<view class="top-box">
			<view class="list-box" :style="'color:' + (activeindex==index?'':'#999999')" @tap="changetab" :data-id="index" v-for="(tab, index) in TabList" :key="index">{{tab}}
				<view :class="activeindex==index?'line-active':'line-noactive'"></view>
			</view>
		</view>
		<!-- 主体区域 大转盘 -->
		<view v-if="activeindex==0" class="main-box">
			<view class="noorder-box" v-if="isShow">
				<image src="http://localhost/Public/Turntable/img/noorder.png" class='active-image'> </image>
				<view>还没有获得奖品哦~</view>
			</view>
			<view class="award-box" v-for="(award, index) in turntableArr" :key="index">
				<image src="/static/images/turntable/award-bg.png" class="award-bg"></image>
				<image src="/static/images/turntable/myaward-ico.png" @tap="awarddetail" :data-btn="award.btn" :data-id="award.id" class="myaward-ico"></image>
				<view class="award-info">
					<view class='award-name'>
						<text>{{award.prize_name}}</text>
						<text class='award-time'>{{award.add_time}}</text>
					</view>
					<view class="award-btn" @tap="award_operation" :data-index="index" :data-name="award.btn" :style="'background:' + (award.btn=='已发放'?'#eeeeee':' linear-gradient(to right,#FF948A,#FF5C6D) ')">{{award.btn}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/Activity/Activity.js
	var app = getApp().globalData;

	export default {
		data() {
			return {
				TabList: ['大转盘', '红包'],
				activeindex: 0,
				turntableArr: [],
				currentpage: 1,
				totlepages: 0,
				isShow: false
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		async onLoad() {
			await this.$onLaunched;
			this.refresh();
		},

		// 触底加载更多
		onReachBottom() {
			console.log('触底了');
			var currentpage = this.currentpage + 1;

			if (currentpage > this.totlepages) {
				uni.showToast({
					title: '暂无更多',
					duration: 1500,
					icon: 'none'
				});
				return false;
			} else {
				this.setData({
					currentpage: currentpage
				});
				this.refresh();
			}
		},
		
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			// 切换红包大转盘
			changetab(e) {
				this.setData({
					activeindex: e.currentTarget.dataset.id
				});
			},

			awarddetail(e) {
				var id = e.currentTarget.dataset.id;
				var btn = e.currentTarget.dataset.btn;

				if (btn == "已发放") {
					uni.showToast({
						title: '该奖品已发放',
						duration: 1500,
						icon: 'none'
					});
					return;
				}

				uni.navigateTo({
					url: '../../AwardDetail/AwardDetail?id=' + id
				});
			},

			award_operation(e) {
				var name = e.currentTarget.dataset.name;
				var index = e.currentTarget.dataset.index;

				if (name == '领取') {
					uni.navigateTo({
						url: '../Information/Information?id=' + this.turntableArr[index].id + '&prize_id=' + this.turntableArr[index].prize_id
					});
				} else if (name == '已发放') {
					uni.showToast({
						title: '该奖品已发放',
						duration: 1500,
						icon: 'none'
					});
				} else if (name == '查看详情') {
					uni.navigateTo({
						url: '../OrderDetail/OrderDetail?id=' + this.turntableArr[index].id + '&delivery_type=' + this.turntableArr[index].delivery_type
					});
				}
			},

			refresh() {
				getApp().globalData.sendRequest({
					url: '/Turntable/TurntableWinList',
					type: "post",
					data: {
						page: this.currentpage,
						page_size: 10
					},
					success: res => {
						if (res.code == 0) {
							var isShow = false;
							this.turntableArr = this.turntableArr.concat(res.data.data);

							for (var i = 0; i < this.turntableArr.length; i++) {
								for (var j = i + 1; j < this.turntableArr.length; j++) {
									if (this.turntableArr[i].id == this.turntableArr[j].id) {
										this.turntableArr.splice(j, 1);
										j--;
									}
								}
							}

							this.turntableArr.forEach(res => {
								switch (res.type) {
									case '1':
										if (res.status == 1) {
											res.btn = '领取';
										} else {
											res.btn = '查看详情';
										}

										;
										break;

									case '2':
										if (res.status == 1) {
											res.btn = '领取';
										} else {
											res.btn = '查看详情';
										}

										;
										break;

									case '3':
										res.btn = '已发放';
										break;

									case '4':
										res.btn = '已发放';
										break;

									case '5':
										res.btn = '已发放';
										break;
								}
							});
							var totlepages = '';

							if (res.data.page_info.data_total % 10 == 0) {
								totlepages = res.data.page_info.data_total / 10;
							} else {
								totlepages = parseInt(res.data.page_info.data_total) / 10 + 1;
							}

							if (this.turntableArr.length == 0) {
								isShow = true;
							} else {
								isShow = false;
							}

							this.setData({
								turntableArr: this.turntableArr,
								totlepages: parseInt(totlepages),
								isShow: isShow
							});
						}
					}
				});
			}

		}
	};
</script>
<style>
	@import "./Activity.css";
</style>
